<template>
  <div id="app" class="todo-container">
    <div class="todo-wrap">
      <!--子组件：头部组件-->
      <todo-header></todo-header>

      <todo-list></todo-list>

      <todo-footer></todo-footer>
    </div>

  </div>
</template>

<script>
import TodoHeader from "./components/todo-header";
import TodoList from "./components/todo-list";
import TodoFooter from "./components/todo-footer";
export default {
  name: 'App',
  components: {
    TodoFooter,
    TodoList,
    TodoHeader
  },
  mounted: function () {
    //触发actions：异步缓存数据
    //this.$store.dispatch('asyncReadTodos')
  }
}
</script>

<style>
  /*app*/
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
